<template>
  <div>
    <!-- 自定义弹窗 -->
    <div v-if="visible" class="custom-dialog">
      <!-- <div class="dialog-backdrop" @click="closeDialog"></div> 点击背景关闭弹窗 -->
      <div class="dialog-container-ljl  ">
        <div class="dialog-content-ljl ">
          <!-- 左半部分 -->
          <div class="left-ljl ">
            <div class="left_0 ">
              <img class="image_3" referrerpolicy="no-referrer"
                src="../assets/modul1.2/SketchPngdb9cba0b2532c2119cb9a5f12fdaeb4d3e9bb6312636bfa340027e2915df299c.png" />
              <span class="text_0">{{ row.title }}</span>
            </div>
            <div class="left_1-ljl">
              <div class="left_1_1">
                <div class="form-item">
                  <label for="category">信息类别</label>
                  <input id="category" v-model="row.informationCategory" type="text" readonly
                    style="color: rgba(255, 255, 255, 1)" />
                </div>
                <div class="form-item">
                  <label for="source">信息来源</label>
                  <input id="source" v-model="row.informationSource" type="text" readonly
                    style="color: rgba(255, 255, 255, 1)" />
                </div>
                <div class="form-item">
                  <label for="time">接收时间</label>
                  <input id="time" v-model="row.publicationTime" type="text" readonly
                    style="color: rgba(255, 255, 255, 1)" />
                </div>
              </div>
            </div>
            <div class="left_2-ljl">
              <!-- <img :src="imageurl" alt="示例图片" style="width:90%; height: 90%;" @click="fetchUrlAndOpen"> -->
              <!-- <img :src="pdfurl" alt="示例图片" style="width:90%; height: 90%;" @click="fetchUrlAndOpen"> -->
              <!-- <iframe :src="pdfurl" width="90%" height="90%"></iframe> -->
              <!-- 版本列表标题 -->
              <div class="version-history-title">
                <i class="el-icon-time"></i>
                <span>文件版本历史</span>
              </div>
              <!-- 版本列表（带滚动） -->
              <div class="version-list-container">
                <div v-for="(version, index) in fileVersionHistory" :key="index" class="version-item">
                  <!-- 版本号 + 是否最新标记 -->
                  <div class="version-header">
                    <span class="version-num" :class="{ 'latest-version': version.isLatest }">
                      V{{ version.version }}
                    </span>
                    <el-tag v-if="version.isLatest" size="mini" type="success">最新</el-tag>
                  </div>
                  <!-- 版本详情 -->
                  <div class="version-detail">
                    <div class="detail-item">
                      <span class="detail-label">更新时间：</span>
                      <span class="detail-value">{{ version.updateTime }}</span>
                    </div>
                    <div class="detail-item">
                      <span class="detail-label">更新内容：</span>
                      <span class="detail-value">{{ version.updateContent }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
          <!-- 右半部分 -->
          <div class="right-ljl ">
            <div class="right_1-ljl ">
              <el-button type="primary" class="anniu-ljl" @click="goBack">返回</el-button>
              <!-- <el-button type="primary" class="anniu-ljl" @click="toggleEditMode">切换交互模式</el-button> -->
            </div>

            <div v-if="isChatMode" class="chat-container">
              <div class="chat-content">
                <!-- 显示欢迎语或提示信息 -->
                <div v-if="chatMessages.length === 0" class="welcome-message">
                  <p>欢迎来到智能聊天系统！</p>
                  <p>请输入您的问题。</p>
                </div>
                <!-- 显示聊天记录 -->
                <div v-else>
                  <div v-for="(message, index) in chatMessages" :key="index" class="chat-message">
                    <div :class="{ 'user-message': message.isUser, 'bot-message': !message.isUser }">
                      <template v-if="message.isUser">
                        <div class="message-content">
                          <!-- <p>{{ message.content }}</p> -->
                          <p v-html="formatMessage(message.content)" :class="{ 'loading-text': message.isLoading }"></p>
                        </div>
                        <img :src="message.avatar" alt="avatar" class="avatar" />
                      </template>

                      <template v-else>
                        <img :src="message.avatar" alt="avatar" class="avatar" />
                        <div class="message-content">
                          <!-- <p>{{ message.content }}</p> -->
                          <!-- <p :class="{ 'loading-text': message.isLoading }">{{ message.content }}</p> -->
                          <p v-html="formatMessage(message.content)" :class="{ 'loading-text': message.isLoading }"></p>
                        </div>
                      </template>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 输入区域 -->
              <div class="chat-input-area">
                <el-input v-model="userInput" type="textarea" :rows="3" placeholder="请输入您的问题..." :disabled="isChatting"
                  class="chat-textarea" />
                <el-button type="primary" :disabled="!userInput.trim() || isChatting" @click="sendUserMessage"
                  class="send-button">
                  {{ isChatting ? '正在处理...' : '发送' }}
                </el-button>
              </div>
            </div>

            <div v-else style="display: flex;flex: 90%;flex-direction: column;">
              <div class="right_2-ljl ">
                <div class="right_2_1-ljl "><span class="text_1-ljl">使用规范</span></div>
                <div class="right_2_2-ljl ">
                  <!-- <div v-if="!isEditing" class="text_2-ljl">{{ usingStandards }}</div> -->
                  <div v-if="!isEditing" class="text_2-ljl" v-html="formatMultiline(usingStandards)"></div>
                  <!-- 编辑状态 -->
                  <textarea v-if="isEditing" v-model="currentUsingStandards" class="input-style1" />
                </div>
              </div>
              <div class="right_3-ljl flex-row">
                <div class="right_3_1-ljl "><span class="text_3-ljl">约束信息</span></div>
                <div class="right_3_2-ljl">
                  <!-- <div v-if="!isEditing" class="text_4-ljl" >{{ constraintInformation }}</div> -->
                  <div v-if="!isEditing" class="text_4-ljl" v-html="formatMultiline(constraintInformation)"></div>
                  <!-- 编辑状态 -->
                  <textarea v-if="isEditing" v-model="currentConstraintInformation" class="input-style2" />
                </div>
              </div>

              <div class="right_4-ljl">
                <div class="button-container">
                  <button class="xiazaiButton" @click="xiazai"><span class="text_5-ljl">接收</span></button>
                  <button class="shibieButton" @click="shibie"><span class="text_7-ljl">导入</span></button>
                  <button class="bianjiButton" @click="bianji"><span class="text_7-ljl">编辑</span></button>
                  <button class="baocunButton" @click="baocun"><span class="text_6-ljl">保存</span></button>
                </div>
              </div>
            </div>

          </div>

        </div>
      </div>
    </div>
  </div>
  <!-- </div> -->
</template>

<script>
import Tablelin from '@/components/Table-lin.vue';
import axios from 'axios';
import userAvatar from '@/assets/img/avatar/userAvatar.png';
import gptAvatar from '@/assets//img/avatar/gptAvatar.png';

const baseApi = process.env.NODE_ENV === 'production'
  //? process.env.VUE_APP_REMOTE_API
  ? '/api'  // 使用代理路径
  : process.env.VUE_APP_REMOTE_API_MODULE1;

export default {
  components: {
    Tablelin
  },
  data() {
    return {
      tabledata2: [],
      selectedRow1: null, // 当前选中的行数据
      title2: "",
      currentPage: 1, // 当前页
      pageSize: 10, // 每页显示条数
      informationData: [],
      isEditing: false, // 控制是否处于编辑状态
      usingStandards: '', // 使用规范内容
      constraintInformation: '', // 约束条件
      currentUsingStandards: this.usingStandards, // 初始化显示的内容
      currentConstraintInformation: this.constraintInformation, // 初始化显示的内容
      imageurl: "",
      pdfurl: "",
      displayUsingStandards: '',
      displayConstraintInformation: '',
      selectedOption: null, // 当前选中的选项
      chatInput: '', // 聊天输入框的内容
      chatMessages: [], // 存储聊天记录
      isChatMode: false, // 是否处于聊天模式
      isChatting: false, // 是否正在聊天
      userAvatar: userAvatar,
      botAvatar: gptAvatar,
      userInput: '', // 新增：用户输入内容
      mockResponses: [ // 模拟后端返回的数据
        "根据文件内容分析，主要包含以下几个方面...",
        "这份文件的核心要点是...",
        "从安全角度考虑，建议关注以下几点...",
        "基于现有规范，可以得出以下结论..."
      ],
      informationId: '',
      // 文件版本历史数据
      fileVersionHistory: []
    }
  },
  props: {
    tabledata: {
      type: [Array, Object], // 允许数组或对象类型
      required: true
    },
    visible: {
      type: Boolean,
      required: true,
    },
    title: {
      type: String,
      default: "", // 弹窗默认标题
    },
    selectedrow: {
      type: [Object, Number, String],
      default: null,
    },
    closeButtonText: {
      type: String,
      default: "关闭", // 关闭按钮默认文本
    },
    row: {
      type: [Array, Object, String], // 允许数组或对象类型
      required: true
    }
  },

  watch: {
    tabledata: {
      handler(newVal, oldVal) {
        // 当 tableData1 更新
        this.tabledata2 = this.tabledata;
        console.log('弹窗组件的abledata 更新了:', newVal);
      },
      deep: true
    },
    selectedrow: {
      async handler(newVal, oldVal) {
        if (this.selectedrow) {
          try {
            const informationData = await this.fetchInformation(this.selectedrow);
            console.log('信息数据:', informationData);
            if (informationData.usingStandards === "" && informationData.constraintInformation === "") {
              this.usingStandards = "未获取到数据，请先进行识别";
              this.constraintInformation = "未获取到数据，请先进行识别";
              this.currentUsingStandards = this.usingStandards;
              this.currentConstraintInformation = this.constraintInformation;
            }
            else {
              this.usingStandards = informationData.usingStandards;
              this.constraintInformation = informationData.constraintInformation;
              this.currentUsingStandards = this.usingStandards;
              this.currentConstraintInformation = this.constraintInformation;
              this.informationId = informationData.id
            }

            // 2. 新增逻辑：获取该文件的版本历史（关键步骤）
            await this.fetchFileVersionHistory(this.selectedrow);

            this.pdfurl = `${baseApi}/${informationData.pdfUrl}`;
            this.imageurl = informationData.imageUrl;
            // this.pdfurl = informationData.pdfUrl;
            console.log('最新pdf', this.pdfurl)
            console.log('当前文件的id', this.informationId)
            console.log('使用规范:', this.usingStandards);
            console.log('约束信息:', this.constraintInformation);
            console.log(JSON.stringify(this.usingStandards));
            console.log(JSON.stringify(this.constraintInformation));
            console.log('照片链接:', this.imageurl);

          } catch (error) {
            console.error('Error fetching information in watch:', error);
          }
        }
      },
      deep: true
    },
    title: {
      handler(newVal, oldVal) {
        console.log('弹窗组件接收到的新标题:', newVal);
        this.title2 = this.title;
      },
      deep: true
    },
  },
  created() {
    console.log("弹窗组件接受到的选中行:", this.selectedrow);
  },
  mounted() {
    this.isChatMode = false;
  },
  methods: {
    // ########## 新增：版本操作方法 ##########
    /**
     * 预览指定版本
     * @param {Object} version - 版本数据
     */
    previewVersion(version) {
      this.$message.info(`正在预览文件 V${version.version}（更新时间：${version.updateTime}）`);
      // 实际项目中可打开对应版本的预览链接
      // window.open(`${baseApi}/file/preview?fileId=${this.selectedrow}&version=${version.version}`);
    },

    /**
     * 回滚到指定版本
     * @param {Object} version - 版本数据
     */
    rollbackVersion(version) {
      this.$confirm(`确定要将文件回滚到 V${version.version} 版本吗？`, '版本回滚', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 模拟回滚接口请求
        setTimeout(() => {
          this.$message.success(`文件已成功回滚到 V${version.version} 版本`);
          // 回滚后更新版本历史（将回滚版本设为最新）
          this.fileVersionHistory = this.fileVersionHistory.map(item => ({
            ...item,
            isLatest: item.version === version.version
          }));
        }, 800);
      }).catch(() => {
        this.$message.info('已取消版本回滚');
      });
    },

    // ########## 新增：获取文件版本历史（真实接口） ##########
    async fetchFileVersionHistory(fileId) {
      try {
        const response = await axios.get(
          `${baseApi}/admin/airspaceNormsAndConstraints/getHistoryById`,
          { params: { id: fileId } } // GET 请求传递文件ID
        );

        if (response.data.code === 0 && Array.isArray(response.data.data)) {
          // 关键：字段映射 + 时间格式转换（后端字段 → 前端所需字段）
          this.fileVersionHistory = response.data.data.map(item => ({
            // 后端 versionNumber → 前端 version（版本号）
            version: item.versionNumber,
            // 后端 isLatest 直接复用（是否最新版本）
            isLatest: item.isLatest,
            // 后端 createTime（ISO格式）→ 前端 updateTime（去掉T的标准格式）
            updateTime: item.createTime ? item.createTime.replace('T', ' ') : '未知时间',
            // 后端 updateContent 直接复用（更新内容）
            updateContent: item.updateContent || '无更新说明' // 兜底：无内容时显示默认值
            // 后端其他字段（如id、normsConstraintsId）若前端不用，可忽略
          }));
          console.log('文件版本历史获取成功：', this.fileVersionHistory);
        } else {
          this.fileVersionHistory = [];
          this.$message.warning('版本历史数据格式异常，请稍后重试');
        }
      } catch (error) {
        this.fileVersionHistory = [];
        console.error('获取文件版本历史失败：', error);
        this.$message.error('获取版本历史失败，请检查网络或联系管理员');
      }
    },
    // 发送用户消息
    async sendUserMessage() {
      if (!this.userInput.trim()) return;

      // 添加用户消息
      this.chatMessages.push({
        isUser: true,
        avatar: this.userAvatar,
        content: this.userInput,
        messageId: Date.now()
      });

      // 准备历史消息数据
      // const history = this.chatMessages
      //   .filter(msg => !msg.isLoading) // 过滤掉加载状态的消息
      //   .map(msg => ({
      //     role: msg.isUser ? 'user' : 'assistant',
      //     content: msg.content
      //   }));
      const history = [
        {
          role: 'system',
          content:
            '你是龙智低空管控助手，专注于解答与低空空域管理相关的问题。用户可能需要如下帮助：“空域使用规范”、“空域使用条件”、“空域申报流程”、“航线申请步骤”等。请始终以专业、简洁的方式提供解答。'
        },
        ...this.chatMessages
          .filter(msg => !msg.isLoading)
          .map(msg => ({
            role: msg.isUser ? 'user' : 'assistant',
            content: msg.content
          }))
      ];
      console.log('file_ids:', this.selectedrow)
      // 准备发送给后端的数据，符合后端格式要求
      const requestData = {
        message: this.userInput,
        history: history.slice(0, -1), // 不包含最新的用户消息，因为它已经在 message 字段中了
        filesId: [this.selectedrow] // 当前文档的ID
      };

      this.isChatting = true;

      // 添加机器人的加载消息
      this.chatMessages.push({
        isUser: false,
        avatar: this.botAvatar,
        isLoading: true,
        content: "正在思考中...", // 添加初始的加载状态文字
        messageId: Date.now()
      });

      // 清空输入
      this.userInput = '';

      // 模拟后端请求
      try {
        // 实际的后端API调用
        const response = await axios.post(`http://192.168.0.135:30027/chat/aliBailian`, requestData);

        // 检查响应状态和数据
        if (response.data.code === 0) {
          await this.handleStreamResponse(response.data.data);
        } else {
          throw new Error(response.data.msg || '请求失败');
        }
      } catch (error) {
        console.error('Error:', error);
        this.$message.error(error.message || '发送消息失败，请重试');

        // 移除加载中的消息
        const loadingMessageIndex = this.chatMessages.length - 1;
        if (this.chatMessages[loadingMessageIndex].isLoading) {
          this.chatMessages.splice(loadingMessageIndex, 1);
        }
      } finally {
        this.isChatting = false;
      }
    },
    // 处理使用规范、约束信息非编辑模式的换行
    formatMultiline(text) {
      if (!text) return '';
      return text.replace(/\n/g, '<br>');
    },
    formatMessage(text) {
      if (!text) return '';
      return text
        .replace(/\n\n/g, '<br><br>') // 处理连续换行
        .replace(/\n/g, '<br>') // 处理单个换行
        .replace(/### (.*?)(?=<br>|$)/g, '<h3>$1</h3>') // 处理三级标题
        .replace(/#### (.*?)(?=<br>|$)/g, '<h4>$1</h4>') // 处理四级标题
        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') // 处理加粗文本
        .replace(/(?<=<br>|^)- (.*?)(?=<br>|$)/g, '<li>$1</li>') // 处理列表项
        .replace(/(?<=<br>|^)（[一二三四五六]）(.*?)(?=<br>|$)/g, '<div class="section">$&</div>') // 处理中文序号段落
        .replace(/(?<=<br>|^)([一二三四五])、(.*?)(?=<br>|$)/g, '<h2 class="major-section">$1、$2</h2>'); // 处理中文大标题
    },
    async handleStreamResponse(responseText) {
      const loadingMessageIndex = this.chatMessages.length - 1;
      let displayedResponse = '';

      // 先清空加载状态的文字
      this.$set(this.chatMessages[loadingMessageIndex], 'content', '');

      // 逐字显示
      for (let i = 0; i < responseText.length; i++) {
        displayedResponse += responseText[i];
        this.$set(this.chatMessages[loadingMessageIndex], 'content', displayedResponse);
        await new Promise(resolve => setTimeout(resolve, 30));
      }

      this.$set(this.chatMessages[loadingMessageIndex], 'isLoading', false);
    },
    async fetchInformation(id) {
      try {
        const response = await axios.post(`${baseApi}/admin/airspaceNormsAndConstraints/getById`, {
          id: id
        });
        return response.data.data; // 返回获取的数据
      } catch (error) {
        console.error('Error fetching information:', error);
      }
    },
    async shibieInformation(id) {
      try {
        // 这个接口暂时无法使用
        // const response = await axios.post(`${baseApi}/admin/airspaceNormsAndConstraints/informationExtraction`, {
        //   id: id,
        // });
        const response = await axios.post(`${baseApi}/admin/airspaceNormsAndConstraints/getById`, {
          id: id
        });
        return response.data.data; // 返回获取的数据
      } catch (error) {
        console.error('Error fetching information:', error);
      }
    },
    async fetchUrlAndOpen() {
      var previewURL = "http://localhost:8080/airspace-restriction"
      window.open('/pdfjs/web/viewer.html?file=' + encodeURIComponent(previewURL + "/test?url=" + this.pdfurl))
    },
    async xiazai() {
      try {
        if (!this.informationId) {
          alert('未获取到文件 ID');
          return;
        }
        // 构建下载链接
        const downloadUrl = `${baseApi}/admin/airspaceNormsAndConstraints/download?fileId=${this.informationId}`;
        console.log('下载链接:', downloadUrl);

        // 使用 window.open 打开新标签页下载
        window.open(downloadUrl, '_blank');
      } catch (error) {
        console.error('下载失败:', error);
        alert('下载失败，请稍后重试');
      }
    },
    async shibie() {
      const informationData = await this.shibieInformation(this.selectedrow);
      console.log('信息数据:', informationData);
      // 调用逐字显示的方法
      this.typeText(informationData.usingStandards, 'usingStandards', 100);
      this.typeText(informationData.constraintInformation, 'constraintInformation', 100);
    },
    typeText(text, displayProperty, delay) {
      let index = 0;
      this[displayProperty] = '';

      const interval = setInterval(() => {
        if (index < text.length) {
          this[displayProperty] += text.charAt(index);
          index++;
        } else {
          clearInterval(interval);
        }
      }, delay);
    },

    goBack() {
      this.chatMessages = [];
      this.isChatting = false;
      this.selectedOption = null;
      this.chatInput = '';
      this.isChatMode = false;
      this.$emit('update:visible', false);
    },
    closeDialog() {
      this.$emit('update:visible', false);
    },
    bianji() {
      this.isEditing = true;
      // 将当前内容赋值给编辑状态的变量
      this.currentUsingStandards = this.usingStandards;
      this.currentConstraintInformation = this.constraintInformation;
    },
    async baocun() {
      // 将编辑后的数据保存到展示变量
      this.usingStandards = this.currentUsingStandards;
      this.constraintInformation = this.currentConstraintInformation;

      // 发送请求到后端保存数据
      const editedData = {
        id: this.selectedrow,
        usingStandards: this.usingStandards,
        constraintInformation: this.constraintInformation,
      };

      try {
        const response = await axios.post(`${baseApi}/admin/airspaceNormsAndConstraints/informationSave`, editedData);
        console.log('保存成功:', response.data);
        this.isEditing = false; // 退出编辑模式
      } catch (error) {
        console.error('保存失败:', error);
        this.isEditing = false; // 退出编辑模式
      }
    },
    resetChatState() {
      this.chatMessages = [];
      this.isChatting = false;
      this.selectedOption = null;
      this.chatInput = '';
    },
    toggleEditMode() {
      this.isChatMode = !this.isChatMode;
      if (this.isChatMode) {
        // 切换到聊天模式时清空之前的聊天内容和状态
        // this.chatMessages = [];
        this.chatInput = '';
        this.isChatting = false;
        this.selectedOption = null; // 重置选择的操作
      }
    },
  },
  // Vue 生命周期钩子，页面关闭或切换时重置状态
  beforeDestroy() {
    this.resetChatState();
  },
};
</script>

<style scoped>
/* 弹窗容器 */
.dialog-container-ljl {
  display: flex;
  flex-direction: column;
}

.header-content {
  position: relative;
  width: 100%;
  /* 使其占据整个宽度 */
  /* height: 10%; */
  background: url("../assets/img/module1/page1top.png") no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  /* 垂直居中 */
}

/* 标题样式 */
.header-title {
  background-image: linear-gradient(180deg, rgba(200, 215, 228, 1) 0, rgba(255, 255, 255, 1) 100%);
  position: relative;
  flex: 2;
  margin-left: 5%;
  width: 20%;
  height: 20%;
  color: rgba(112, 112, 112, 1);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
  font-family: PangMenZhengDao-3;
  text-align: left;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 图标样式 */
.header-icon {
  position: relative;
  width: 22px;
  height: 20px;
  margin-left: 20px;
  /* 与其他内容间隔 */
  margin-top: -20px;
}

.dialog-title-ljl {
  margin-left: 0%;
}

/* 弹窗顶部标题和按钮 */
.dialog-header-ljl {
  flex-direction: row;
  /* flex:10%; */
  height: 5%;
  width: 100%;
  position: relative;
  /*元素的定位方式为相对定位，这允许元素相对于其正常位置进行偏移。*/
  display: flex;
  /*弹性盒子*/
  align-items: center;
  /*弹性盒子容器中，垂直居中对齐子元素。*/
  justify-content: flex-start;
  padding-left: 2%;
  /*元素左侧内边距为 2%，增加左侧的空间。*/
  gap: 4%;
  /*弹性盒子容器内的子元素之间设置 2% 的间距。*/

  background: url("../assets/modul1.2/SketchPng9a3840ec9a1e44cb90b8cc0d22f86217e9bd2dd719c9cad7bfacd8322b4b85d6.png");
  background-repeat: no-repeat;
  /*背景图像不会重复显示。*/
  background-position: 0% 50%;
}

.alert_stripe {
  display: flex;
  position: absolute;
  right: 1%;
}



/* 弹窗内容区 */
.dialog-content-ljl {
  flex-direction: row;
  height: 95%;
  width: 100%;
  display: flex;
  background: url("../assets/modul1.2/SketchPng887da9c96099665db139d378e7d937efcec9b7d473a81b4163c40eed1a41a833.png");
  background-repeat: no-repeat;
  background-size: cover;

}

.left-ljl {
  flex-direction: column;
  flex: 20%;
  box-shadow: inset 0px 0px 6px 0px rgba(73, 172, 207, 1);
  background-color: rgba(0, 16, 29, 0.5);
  border-radius: 8px;
  /* width: 280px;
  height: 80%; */
  height: 76vh;
  border: 1px solid #000;
  margin: 1rem 0 1rem 1.5rem;
  display: flex;
  flex-direction: column;
}

.left_0 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex: 5%;
  margin: 2rem 0 0 1.5rem;
}

.image_3 {
  width: 25px;
  height: 15px;
  margin-top: 3px;
}

.text_0 {
  color: rgba(255, 255, 255, 1);
  font-size: 16px;
  font-family: AlibabaPuHuiTi_2_65_Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 20px;
  margin-left: 0.5rem;
  max-width: 267px;
  /* 设置最大宽度 */
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(12px, 2vw, 16px);
  /* 动态调整字体大小，最小12px，最大16px */
}

.left_1-ljl {
  height: 40%;
  /* border: 1px solid #000;
  box-shadow: inset 0px 0px 1px 0px rgba(73, 172, 207, 1); */
  margin: 0rem 1.5rem 0 1.5rem;
  display: flex;
  flex-direction: column;

}

/* .left_1_1{
  margin:0.1rem;
  height: 100%;
  display: flex;
  flex-direction: column;

} */
.form-item {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  margin: 1rem 0.5rem 0 0.5rem;
  color: rgba(255, 255, 255, 1);
}

label {
  width: 10vw;
  /* font-weight: bold; */
  text-align: left;
  margin-right: 1vw;
  margin-bottom: 0.9rem;
  margin-top: 0.5rem;
  /* background-color: rgba(0, 0, 0, 0.1); */
  font-size: 14px;
  color: rgba(255, 255, 255, 1);
  font-weight: 400;
  /* normal */
}

input {
  flex: 1;
  padding: 0.5rem 1rem;
  box-sizing: border-box;
  border: 1px solid rgba(146, 207, 255, 0.29);
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.1);
  font-size: 14px;
  color: rgba(255, 255, 255, 1)
}

.info1 {
  flex: 10%;
  margin-top: 1rem;
}

.info1_1 {
  flex: 10%;
  border: 1px solid #000;
  transition: background-color 0.3s ease;
  background-image: url("../assets/img/module4/part1/table3.png");
  background-size: cover;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}

.info2 {
  flex: 10%;
  margin-top: 0.5rem;
}

.info2_1 {
  flex: 10%;
  border: 1px solid #000;
  transition: background-color 0.3s ease;
  background-image: url("../assets/img/module4/part1/table3.png");
  background-size: cover;
  margin-top: 0.2rem;
}

.info3 {
  flex: 10%;
  margin-top: 1rem;
}

.info3_1 {
  flex: 10%;
  border: 1px solid #000;
  transition: background-color 0.3s ease;
  background-image: url("../assets/img/module4/part1/table3.png");
  background-size: cover;
  margin-top: 0.2rem;
}

.left_2-ljl {
  display: flex;
  height: 55%;
  margin: 1rem 1rem 2rem 1rem;
  border: 1px solid #000;
  box-shadow: inset 0px 0px 1px 0px rgba(73, 172, 207, 1);
  cursor: pointer;
  /* 显示为手型，表示可以点击 */
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
}

/* 版本历史外层容器 */
.left_2-ljl {
  display: flex;
  flex-direction: column;
  height: 55%;
  margin: 1rem 1rem 2rem 1rem;
  border: 1px solid #000;
  box-shadow: inset 0px 0px 1px 0px rgba(73, 172, 207, 1);
  padding: 10px;
  box-sizing: border-box;
  background-color: rgba(0, 16, 29, 0.3);
}

/* 版本历史标题 */
.version-history-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #409EFF;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(73, 172, 207, 0.3);
}

.version-history-title i {
  font-size: 18px;
}

/* 版本列表容器（带滚动） */
.version-list-container {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #409EFF rgba(0, 16, 29, 0.5);
}

/* 单个版本项 */
.version-item {
  background-color: rgba(0, 20, 40, 0.5);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 版本号区域 */
.version-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.version-num {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
}

.latest-version {
  color: #67C23A;
  /* 最新版本标绿 */
}

/* 版本详情区域 */
.version-detail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.detail-item {
  display: flex;
  font-size: 13px;
  line-height: 1.5;
}

.detail-label {
  width: 80px;
  color: #909399;
  /* 标签灰色 */
}

.detail-value {
  flex: 1;
  color: #E5E6EB;
  /* 内容浅灰色 */
  word-break: break-all;
  /* 长文本换行 */
}

/* 滚动条样式优化 */
.version-list-container::-webkit-scrollbar {
  width: 6px;
}

.version-list-container::-webkit-scrollbar-track {
  background: rgba(0, 16, 29, 0.5);
  border-radius: 3px;
}

.version-list-container::-webkit-scrollbar-thumb {
  background: #409EFF;
  border-radius: 3px;
}

.version-list-container::-webkit-scrollbar-thumb:hover {
  background: #66b1ff;
}

.right-ljl {
  flex: 80%;
  flex-direction: column;
  display: flex;
  height: 77.5vh;
}

.right_1-ljl {
  flex: 0%;
  display: flex;
  justify-content: flex-end;
  margin: 1rem 2.5rem;
}

.anniu-ljl {
  padding: 10px 2vw;
  font-size: 12px;
  height: 2rem;
}

.right_2-ljl {
  display: flex;
  flex-direction: row;
  flex: 40%;
  margin: 0.5rem 2.5rem 0.5rem 2.5rem;
}

.right_2_1-ljl {
  /* flex-direction: row; */
  display: flex;
  width: 8%;
  justify-content: flex-end;
}

.right_2_2-ljl {
  /* flex-direction: row; */
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  border: 1px solid #000;
  width: 92%;
}

.text_1-ljl {
  /* font-size: 1vw; 字体大小为 0.72 个视口宽度单位 (vw)，相当于视口宽度的 0.72% */
  font-family: AlibabaPuHuiTi_2_55_Regular;
  margin: 0.5rem 0.5rem 0 0;
  color: rgba(255, 255, 255, 1);
  font-weight: 400;
  /* normal */
  font-size: 14px;
  white-space: pre-line !important;
}

.text_2-ljl {
  font-family: AlibabaPuHuiTi_2_55_Regular;
  margin: 0.5rem 0 0 1rem;
  color: rgba(255, 255, 255, 1);
  font-weight: 400;
  font-size: 14px;
  /* white-space: pre-line !important; */
  /* 避免文字过多高度过大 */
  max-height: 280px;
  overflow-y: auto;
  padding-right: 5px;
  /* 可选：避免滚动条挡住文字 */
  box-sizing: border-box;
}

.input-style1 {

  border: none;
  /* 移除边框 */
  background-color: transparent;
  /* 设置背景透明 */
  box-shadow: none;
  /* 移除阴影 */
  color: rgba(255, 255, 255, 1);
  /* 设置字体颜色，与非编辑状态一致 */
  font-size: 14px;
  /* 确保字体大小一致 */
  width: 100%;
  height: 100%;
  /* 使输入框宽度适应容器 */
  /* height:20%; */
  box-sizing: border-box;
  /* 确保内边距和边框不会影响宽度 */
  /* margin: 0.31vw 0.5vw 0 0 */
  vertical-align: top;
  padding: 0.5rem;
  /* 设置 padding 以确保内部有空隙 */
  font-family: AlibabaPuHuiTi_2_75_SemiBold;
}

.input-style2 {

  border: none;
  /* 移除边框 */
  background-color: transparent;
  /* 设置背景透明 */
  box-shadow: none;
  /* 移除阴影 */
  color: rgba(255, 255, 255, 1);
  /* 设置字体颜色，与非编辑状态一致 */
  font-size: 14px;
  /* 确保字体大小一致 */
  width: 100%;
  height: 100%;
  padding: 0.5rem;
  /* 设置 padding 以确保内部有空隙 */
  /* 使输入框宽度适应容器 */
  /* height:20%; */
  box-sizing: border-box;
  vertical-align: top;
  font-family: AlibabaPuHuiTi_2_75_SemiBold;

}

.right_3-ljl {
  flex: 40%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin: 0.5rem 2.5rem 0.5rem 2.5rem;

}

.right_3_1-ljl {
  /* flex-direction: row; */
  width: 8%;
  display: flex;
  justify-content: flex-end;


}

.right_3_2-ljl {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  border: 1px solid #000;
  width: 92%;
  display: inline-block
}

.text_3-ljl {
  /* font-size: 1vw; 字体大小为 0.72 个视口宽度单位 (vw)，相当于视口宽度的 0.72% */
  /* font-family: AlibabaPuHuiTi_2_55_Regular; */
  margin: 0.5rem 0.5rem 0 0;
  color: rgba(255, 255, 255, 1);
  font-weight: 400;
  /* normal */
  font-size: 14px;
}

.text_4-ljl {
  font-family: AlibabaPuHuiTi_2_55_Regular;
  margin: 0.5rem 0 0 1rem;
  color: rgba(255, 255, 255, 1);
  font-weight: 400;
  font-size: 14px;
  /* 避免文字过多高度过大 */
  max-height: 280px;
  overflow-y: auto;
  padding-right: 5px;
  /* 可选：避免滚动条挡住文字 */
  box-sizing: border-box;
}

.right_4-ljl {
  flex: 20%;
  display: flex;
  /* 使用 Flexbox 布局 */
  justify-content: center;
  /* 将内容推到右边 */
  padding: 1rem;
  /* 添加一些内边距 */
  margin: 0.5rem 2.5rem 0.5rem 2.5rem;
}

.button-container {
  display: flex;
  /* 使用 Flexbox 布局来排列按钮 */
  flex-direction: row;
  gap: 10px;
  height: 30%;
  /* width:50%;            */
  justify-content: flex-end;
  justify-content: flex-end;
  margin-top: 5rem;
  margin-right: 2vh;
}

.xiazaiButton,
.baocunButton,
.shibieButton,
.bianjiButton {
  display: flex;
  /* 使用 Flexbox 布局来排列按钮 */
  flex-direction: row;
  background: url("../assets/modul1.2/SketchPng2430e3f669dc1d7f487d7bd50d8fdbe43c3c1695838735b038b7efb6427adeb6.png");
  background-size: 100% 100%;
  padding: 0.5rem 2rem;
  /* 添加按钮内边距 上下 左右 */
  border: none;
  /* 去掉默认边框 */
  border-radius: 5px;
  /* 添加圆角 */
  cursor: pointer;
  /* 鼠标悬停时显示为手形 */
  display: flex;
  /* 让按钮内容也使用 Flexbox */
  align-items: center;
  /* 垂直居中按钮内容 */
  /* height:20%; */
  /* width: 30%; */
  margin-right: 1rem;

}

.text_5-ljl {

  background: url("../assets/modul1.2/SketchPnga180aec1ee29093c281cd765681df6998c4b7f6bcbfcce24ae96ce81c43efcaa.png");
  background-size: 100% 100%;
  text-shadow: inset 0px 0px 5px rgba(233, 251, 255, 0.43);
  background-image: linear-gradient(181deg,
      rgba(141, 219, 255, 1) 0,
      rgba(88, 235, 255, 1) 42.056381%,
      rgba(95, 169, 255, 1) 100%);
  color: rgba(112, 112, 112, 1);
  font-size: 16px;
  letter-spacing: 0.800000011920929px;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text_6-ljl {
  background: url("../assets/modul1.2/SketchPnga180aec1ee29093c281cd765681df6998c4b7f6bcbfcce24ae96ce81c43efcaa.png");
  background-size: 100% 100%;
  text-shadow: inset 0px 0px 5px rgba(233, 251, 255, 0.43);
  background-image: linear-gradient(181deg,
      rgba(141, 219, 255, 1) 0,
      rgba(88, 235, 255, 1) 42.056381%,
      rgba(95, 169, 255, 1) 100%);
  color: rgba(112, 112, 112, 1);
  font-size: 16px;
  letter-spacing: 0.800000011920929px;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text_7-ljl {
  background: url("../assets/modul1.2/SketchPnga180aec1ee29093c281cd765681df6998c4b7f6bcbfcce24ae96ce81c43efcaa.png");
  background-size: 100% 100%;
  text-shadow: inset 0px 0px 5px rgba(233, 251, 255, 0.43);
  background-image: linear-gradient(181deg,
      rgba(141, 219, 255, 1) 0,
      rgba(88, 235, 255, 1) 42.056381%,
      rgba(95, 169, 255, 1) 100%);
  color: rgba(112, 112, 112, 1);
  font-size: 16px;
  letter-spacing: 0.800000011920929px;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}

.dialog-footer button:hover {
  background-color: #0056b3;
}




.chat-container {
  padding: 10px;
  background-color: #f5f5f525;
  border-radius: 5px;
  display: flex;
  flex: 90%;
  flex-direction: column;
  justify-content: space-between;
  /* 顶部内容和底部选择框之间自动填充空间 */
  width: 97%;
  margin: auto;
}

.chat-box {
  background-color: rgba(255, 255, 255, 0.185);
  padding: 10px;
  border-radius: 5px;
  max-height: 300px;
  overflow-y: auto;
}

.chat-content {
  height: 60vh;
  max-height: 60vh;
  overflow-y: scroll;
  scrollbar-width: none;
  /* 隐藏滚动条 (适用于 Firefox) */
  -ms-overflow-style: none;
  /* 隐藏滚动条 (适用于 IE 和 Edge) */
}


.input-style1 {
  margin-top: 10px;
}

.send-button {
  margin-top: 18px;
  width: 10%;
}

.waiting {
  color: gray;
  font-style: italic;
}

.welcome-message {
  text-align: center;
  /* 居中显示 */
  color: #e3e7ee;
  /* 灰色文本 */
  font-size: 16px;
  margin-top: 26vh;
}

.chat-message {
  display: flex;
  margin-bottom: 10px;
}

.user-message {
  align-self: flex-end;
  width: 100%;
  /* 用户消息框占满整个宽度 */
  display: flex;
  justify-content: flex-end;
  /* 内容和头像靠右对齐 */
  gap: 10px;
  /* 头像和消息框的间距 */
}

.bot-message {
  align-self: flex-start;
  width: 100%;
  /* 机器人消息框占满整个宽度 */
  display: flex;
  justify-content: flex-start;
  /* 内容和头像靠左对齐 */
  gap: 10px;
  /* 头像和消息框的间距 */
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.message-content {
  max-width: 70%;
  background: #f0f0f0;
  padding: 5px 10px 5px 10px;
  border-radius: 8px;
  word-break: break-word;
  /* 确保长单词换行 */
  font-size: 14px;
}

.message-content :deep(h2) {
  font-size: 18px;
  font-weight: bold;
  margin: 15px 0 10px 0;
  color: inherit;
}

.message-content :deep(h3) {
  font-size: 16px;
  font-weight: bold;
  margin: 12px 0 8px 0;
  color: inherit;
}

.message-content :deep(h4) {
  font-size: 15px;
  font-weight: bold;
  margin: 10px 0 6px 0;
  color: inherit;
}

.message-content :deep(strong) {
  font-weight: bold;
}

.message-content :deep(li) {
  margin-left: 20px;
  list-style-type: disc;
  margin-bottom: 5px;
  line-height: 1.5;
}

.message-content :deep(br) {
  display: block;
  content: "";
  margin: 8px 0;
}

.message-content :deep(.section) {
  margin: 8px 0;
  padding-left: 20px;
}

.message-content :deep(.major-section) {
  margin: 15px 0;
  color: inherit;
  font-weight: bold;
}

/* 确保换行符正确显示 */
.message-content p {
  white-space: pre-wrap;
}

.user-message .message-content {
  background: #3b82f6;
  color: white;
  text-align: left;
}

.bot-message .message-content {
  background: #e0e0e0;
  color: black;
  text-align: left;
  width: 70%;
}

.chat-input-area {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  align-items: flex-start;
}

.chat-textarea {
  flex-grow: 1;
}

.send-button {
  width: 100px;
  height: 40px;
  margin-top: 0;
}
</style>
